<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        :permission="permissionList"
        v-model="form"
        :before-open="beforeOpen"
        :before-close="beforeClose"
        v-bind="bindVal"
        v-on="onEvent"
        :page.sync="page"
      >
        <template slot-scope="scope" slot="menuLeft">

          <el-button type="primary" size="small" @click.stop="sendBatch">下发</el-button>
            <el-upload
                  class="upload-inline"
                  action=""
                  :show-file-list="false"
                  accept=".xls,.xlsx"
                  :http-request="handleImport">
                  <el-button type="primary" size="small">批量导入</el-button>
                </el-upload>
          <el-button type="primary" size="small" @click.stop="exportExc">导出</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button
            :type="scope.type"
            :size="scope.size"
            @click="openEdit(scope.row,scope.index)"
          >编辑</el-button>
          <el-button
            :type="scope.type"
            :size="scope.size"
            @click.stop="openView(scope.row,scope.index)"
          >预览</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {
  addObj,
  delObj,
  fetchList,
  putObj,
  exportExcel,
  importExcel,
  sendObj,
} from "@/api/subway/swstinvalidticket";
import {
  tableOption,
   tableOptionQingFen,
  tableOptionQingFenEdit,
  tableOptionQingFenView,
} from "@/const/crud/subway/swstinvalidticket";
import { mapGetters } from "vuex";
import baseCrud from '@/mixins/base-crud'

export default {
  name: "SwStInvalidTicketqf",
  mixins: [baseCrud('subway/SwStInvalidTicketqf')],
  data() {
    return {
      searchForm: {},
      form: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOptionQingFen,
      tableOptionQingFenEdit: tableOptionQingFenEdit,
      tableOptionQingFenView: tableOptionQingFenView,
    };
  },
  created() {},
  mounted: function () {},
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.st_invalid_ticket_add, false),
        delBtn: this.vaildData(
          this.permissions.st_invalid_ticket_delete,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.st_invalid_ticket_update,
          false
        ),
      };
    },
  },
  methods: {
      sendBatch: function() {
      if (this.$refs.crud.tableSelect.length < 1) {
        this.$message.error("请勾选数据");
        return false;
      }
      let ids = this.$refs.crud.tableSelect;
      sendObj(ids)
        .then(data => {
          this.$message.success("下发成功");
          this.getList(this.page);
          done();
        })
        .catch(() => {
          loading();
        });
    },
    handleImport(item){
              let file = item.file
              let param = new FormData()
              param.append('file',file)
              importExcel(param).then(() => {
                this.$notify({
                  title: '成功',
                  message: '导入成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList(this.page)
              })
            },
    exportExc(page, params) {
      let loadingInstance1 = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      exportExcel(Object.assign({}, null, this.searchForm))
        .then((res) => {
          const blob = new Blob([res.data], {
            type:
              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          });
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "无效票信息列表.xlsx";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement);
          window.URL.revokeObjectURL(href);
        })
        .then((response) => {
          loadingInstance1.close();
        })
        .catch(() => {
          loadingInstance1.close();
        });
    },
    openView(row, index) {
      this.tableOption = tableOptionQingFenView;
      this.$refs.crud.rowView(row, index);
      return;
    },
    openEdit(row, index) {
      this.tableOption = tableOptionQingFenEdit;
      this.$refs.crud.rowEdit(row, index);
    },
    getList(page, params) {
      this.tableLoading = true;
      return fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      ).then((response) => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
      });
    },
    rowDel: function (row) {
      var _this = this;
      this.$confirm(
        '是否确认原卡号"' + row.old_card_order + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delObj(row);
        })
        .then(() => {
          this.getList(this.page);
          _this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
        })
        .catch(function () {});
    },
    handleUpdate: function (row, index, done) {
      putObj(row).then(() => {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
        this.getList(this.page);
        done();
      });
    },
    handleSave: function (row, done) {
      addObj(row).then(() => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
        this.getList(this.page);
        done();
      });
    },
    searchChange(form, done) {
      this.searchForm = form;
      this.getList(this.page, form).then(() => {
        done();
      });
    },
    handleExcel() {
      this.tableLoading = true;
      exportObj(Object.assign({}, null, this.searchForm)).then((res) => {
        const blob = new Blob([res.data], {
          type:
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
        });
        const downloadElement = document.createElement("a");
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        downloadElement.download = "无效票信息列表.xlsx";
        document.body.appendChild(downloadElement);
        downloadElement.click();
        document.body.removeChild(downloadElement);
        window.URL.revokeObjectURL(href);
        this.tableLoading = false;
      });
    },
    beforeOpen(done, type) {
      done();
    },
    beforeClose(done, type) {
      this.tableOption = tableOptionQingFen;
      done();
    },
    refreshChange() {
      this.getList(this.page);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
